<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/5/11
  Time: 18:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link href="/css/denglu.css" rel="stylesheet">
    <title></title>
    <style>
        *{
            list-style: none;
        }

        #form2 ul{
            position: relative;
            right: 25px;
        }
        #form2 ul a,#form2 ul a:visited,#form2 ul a:hover{
            text-decoration: none;
            font-weight: bold;
            color:#122b40;
        }
    </style>
</head>
<body>
<div class="container right-panel-active">
    <!-- 注册 -->
    <div class="container__form container--signup">
        <form action="/UserServlet?opr=up" class="form" id="form1">
            <h2 class="form__title">注册</h2>
            <input type="text" placeholder="用户名" name="username" class="input" />
            <input type="email" placeholder="Email" class="input" name="email"/>
            <input type="password" placeholder="密码" class="input" name="password"/>
            <input type="date" placeholder="生日" name="birthday">
            <button class="btn">提交</button>
        </form>
    </div>

    <!-- 登录 -->
    <div class="container__form container--signin">
        <form action="/UserServlet?opr=in" class="form" id="form2">
            <h2 class="form__title">登录</h2>
            <input type="email" placeholder="Email" class="input" name="email"/>
            <input type="password" placeholder="密码" class="input" name="password"/>
            <ul style="display: flex;justify-content:space-between;width: 200px">
                <li><a href="#">忘记密码</a></li>
                <li><a href="#">人脸登录</a></li>
            </ul>
            <button class="btn">登录</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">登录</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());
</script>
